// 全局工具函数
document.addEventListener('DOMContentLoaded', function() {
    // 初始化工具提示
    initTooltips();

    // 初始化表单验证
    initFormValidation();

    // 初始化日期时间选择器
    initDateTimePickers();

    // 初始化AJAX请求拦截器
    initAjaxInterceptor();

    // 初始化通知系统
    initNotifications();
});

/**
 * 初始化Bootstrap工具提示
 */
function initTooltips() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}

/**
 * 初始化表单验证
 */
function initFormValidation() {
    // 为所有需要验证的表单添加验证逻辑
    const forms = document.querySelectorAll('.needs-validation');

    Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }

            form.classList.add('was-validated');
        }, false);
    });
}

/**
 * 初始化日期时间选择器
 */
function initDateTimePickers() {
    // 使用flatpickr初始化所有日期时间输入框
    const dateInputs = document.querySelectorAll('[data-datepicker]');
    dateInputs.forEach(input => {
        flatpickr(input, {
            enableTime: input.dataset.time === 'true',
            dateFormat: input.dataset.format || 'Y-m-d',
            minDate: input.dataset.min || 'today',
            maxDate: input.dataset.max,
            locale: 'zh' // 中文支持
        });
    });
}

/**
 * 初始化AJAX请求拦截器
 */
function initAjaxInterceptor() {
    // 添加请求拦截器
    axios.interceptors.request.use(function(config) {
        // 在发送请求之前做些什么
        const token = localStorage.getItem('jwtToken');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    }, function(error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function(response) {
        // 对响应数据做点什么
        return response;
    }, function(error) {
        // 对响应错误做点什么
        if (error.response && error.response.status === 401) {
            // 未授权，跳转到登录页
            window.location.href = '/login';
        }
        return Promise.reject(error);
    });
}

/**
 * 初始化通知系统
 */
function initNotifications() {
    // 如果有通知消息，显示它
    const notification = document.getElementById('notification');
    if (notification) {
        const type = notification.dataset.type || 'info';
        const message = notification.dataset.message || '';

        if (message) {
            showNotification(message, type);
        }
    }
}

/**
 * 显示通知
 * @param {string} message 消息内容
 * @param {string} type 消息类型 (success, info, warning, danger)
 */
function showNotification(message, type = 'info') {
    const notificationContainer = document.getElementById('notification-container');
    if (!notificationContainer) return;

    const alertClasses = {
        success: 'alert-success',
        info: 'alert-info',
        warning: 'alert-warning',
        danger: 'alert-danger'
    };

    const alertDiv = document.createElement('div');
    alertDiv.className = `alert ${alertClasses[type]} alert-dismissible fade show`;
    alertDiv.role = 'alert';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

    notificationContainer.appendChild(alertDiv);

    // 5秒后自动消失
    setTimeout(() => {
        alertDiv.classList.remove('show');
        setTimeout(() => {
            alertDiv.remove();
        }, 150);
    }, 5000);
}

/**
 * 加载数据并渲染表格
 * @param {string} url API地址
 * @param {HTMLElement} tableElement 表格元素
 */
async function loadTableData(url, tableElement) {
    try {
        showLoading(tableElement);

        const response = await axios.get(url);
        const data = response.data;

        renderTable(data, tableElement);
    } catch (error) {
        console.error('加载数据失败:', error);
        showNotification('加载数据失败，请稍后重试', 'danger');
    } finally {
        hideLoading(tableElement);
    }
}

/**
 * 显示加载状态
 * @param {HTMLElement} element 要显示加载状态的元素
 */
function showLoading(element) {
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'text-center py-4';
    loadingDiv.innerHTML = '<div class="loading-spinner"></div><p class="mt-2">加载中...</p>';
    loadingDiv.id = 'loading-indicator';

    element.appendChild(loadingDiv);
}

/**
 * 隐藏加载状态
 * @param {HTMLElement} element 要隐藏加载状态的元素
 */
function hideLoading(element) {
    const loadingDiv = document.getElementById('loading-indicator');
    if (loadingDiv) {
        loadingDiv.remove();
    }
}

/**
 * 渲染表格数据
 * @param {Array} data 数据数组
 * @param {HTMLElement} tableElement 表格元素
 */
function renderTable(data, tableElement) {
    // 这里根据实际数据结构实现表格渲染逻辑
    // 示例代码需要根据您的实际API响应结构调整
    const tbody = tableElement.querySelector('tbody');
    tbody.innerHTML = '';

    if (data.length === 0) {
        const tr = document.createElement('tr');
        tr.innerHTML = '<td colspan="100%" class="text-center py-4">没有找到数据</td>';
        tbody.appendChild(tr);
        return;
    }

    data.forEach(item => {
        const tr = document.createElement('tr');
        // 根据实际数据结构生成表格行
        tr.innerHTML = `
            <td>${item.id}</td>
            <td>${item.name || item.title}</td>
            <td>${item.status ? formatStatus(item.status) : ''}</td>
            <td>
                <button class="btn btn-sm btn-outline-primary view-btn" data-id="${item.id}">查看</button>
            </td>
        `;
        tbody.appendChild(tr);
    });
}

/**
 * 格式化状态
 * @param {string} status 状态值
 * @returns {string} 格式化后的状态HTML
 */
function formatStatus(status) {
    const statusClasses = {
        active: 'bg-success',
        inactive: 'bg-secondary',
        pending: 'bg-warning',
        approved: 'bg-success',
        rejected: 'bg-danger'
    };

    const statusTexts = {
        active: '活跃',
        inactive: '未激活',
        pending: '待审核',
        approved: '已批准',
        rejected: '已拒绝'
    };

    const className = statusClasses[status.toLowerCase()] || 'bg-info';
    const text = statusTexts[status.toLowerCase()] || status;

    return `<span class="badge ${className}">${text}</span>`;
}

// 导出全局函数
window.MeetSmart = {
    showNotification,
    loadTableData,
    initFormValidation
};
document.addEventListener('DOMContentLoaded', function() {
    // 显示欢迎通知
    MeetSmart.showNotification('欢迎回来！系统已准备就绪', 'success');

    // 加载表格数据
    const roomTable = document.getElementById('room-table');
    if (roomTable) {
        MeetSmart.loadTableData('/api/rooms', roomTable);
    }
});